<template>
  <div class="sidebar">
    <nav class="sidebar-nav">
      <ul class="nav">
        <template v-for="item in navItems" >
          <template v-if="item.children">
            <!-- First level dropdown -->
            <SidebarNavDropdown :name="item.ma_name" :url="item.ma_url" :icon="item.ma_icon" :key="item.ma_id" >
              <template v-for="childL1 in item.children">
                <template v-if="childL1.children">
                  <!-- Second level dropdown -->
                  <SidebarNavDropdown :name="childL1.ma_name" :url="childL1.ma_url" :icon="childL1.ma_icon" :key="childL1.ma_id">
                    <li class="nav-item" v-for="childL2 in childL1.children" :key="childL2.id">
                      <SidebarNavLink :name="childL2.ma_name" :url="childL2.ma_url" :icon="childL2.ma_icon" :badge="childL2.badge" :variant="item.variant"/>
                    </li>
                  </SidebarNavDropdown>
                </template>
                <template v-else>
                  <SidebarNavItem :classes="childL1.class"  :key="childL1.ma_id">
                    <SidebarNavLink :name="childL1.ma_name" :url="childL1.ma_url" :icon="childL1.ma_icon" :badge="childL1.badge" :variant="item.variant"/>
                  </SidebarNavItem>
                </template>
              </template>
            </SidebarNavDropdown>
          </template>
          <template v-else>
            <SidebarNavItem :classes="item.class"  :key="item.ma_id">
              <SidebarNavLink :name="item.ma_name" :url="item.ma_url" :icon="item.ma_icon" :badge="item.badge" :variant="item.variant"/>
            </SidebarNavItem>
          </template>
        </template>
      </ul>
      <slot></slot>
    </nav>
    <SidebarMinimizer/>
  </div>
</template>
<script>
import SidebarMinimizer from './SidebarMinimizer'
import SidebarNavDivider from './SidebarNavDivider'
import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle'
import SidebarNavItem from './SidebarNavItem'
import SidebarNavLabel from './SidebarNavLabel'
export default {
  name: 'sidebar',
  props: {
    navItems: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  components: {
    SidebarMinimizer,
    SidebarNavDivider,
    SidebarNavDropdown,
    SidebarNavLink,
    SidebarNavTitle,
    SidebarNavItem,
    SidebarNavLabel
  },
  methods: {
    handleClick (e) {
      e.preventDefault()
      e.target.parentElement.classList.toggle('open')
    }
  }
}
</script>
<style lang="css">
  .nav-link {
    cursor:pointer;
  }
</style>
